<template>
  <div class="index-swipe-container flex-column flex-center">
    <div class="title font-17 colorfff">小CEO工作台</div>
    <div class="content">
      <div class="top flex-center">
        <img class="img" src="~@/assets/imgs/reconsitution/Group.png" />
        <div class="right">
          <div class="flex-center user">
            <span class="font-18">{{ info.LOGIN_NAME }}</span>
            <div class="js font-13 colorfff">{{ info.CALC_TYPE_NAME }}</div>
          </div>
          <div class="font-13 color666" @click="handleSelectGrid">
            {{ info.GRID_NAME }}
            <van-icon name="play" v-if="showGridArrow" />
          </div>
        </div>
      </div>
      <div class="bottom flex-between flex-center">
        <div class="flex-center" v-for="(item, index) in numList" :key="index + 'num'">
          <img class="icon" :src="require('../../../../assets/imgs/reconsitution/icon_' + item.icon + '.png')" />
          <div class="font-13 color333">{{ item.label }}:{{ userNum[item.numModel] }}</div>
        </div>
      </div>
    </div>

    <!-- <GdwyyAppSelectGrid
      ref="GdwyyAppSelectGridRef"
      :GRID_NAME="info.GRID_NAME"
      @changeGrid="handlechangeGrid"
    ></GdwyyAppSelectGrid> -->
  </div>
</template>

<script>
import { userInfo } from '@/api/publicline/index.js'
import { accountDate } from '@/api/common.js'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import GdwyyAppSelectGrid from './components/selectGrid.vue'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
const _apiConfig = [
  {
    url: '8a31cdd68a7e768a018ac130125e000c',
    requestPostHook: 'wgcyHook',
  },
  {
    url: '8a31cdd68a7e768a018ac2ca41070017',
    requestPostHook: 'bqygHook',
    dataType: 'Array',
  },
  {
    url: '8a31cdd68a7e768a018ac15823dc000e',
    requestPostHook: 'yytHook',
  },
]
export default {
  components: { GdwyyAppSelectGrid },
  props: {
    title: {
      type: String,
    },
  },
  mixins: [reconsitutionMixin],
  data() {
    return {
      info: {},
      numList: [
        {
          icon: 'wgcy',
          label: '营服成员',
          numModel: 'wgcy',
        },
        {
          icon: 'bq',
          label: '包区',
          numModel: 'bq',
        },
        {
          icon: 'yyt',
          label: '营业厅',
          numModel: 'yyt',
        },
      ],
      userNum: {
        wgcy: 0,
        bq: 0,
        yyt: 0,
      },
      queryParam: {
        gridId: '',
        dayId: '',
      },
      showGridArrow: false,
    }
  },

  created() {
    const that = this
    that.showGridArrow = localStorage.getItem('$showGridArrow') === 'true'
    that.initData()
    const { setAllRequest, queryParam } = that
    function main(e) {
      if (e.key === '$dialogFinish' && e.newValue) {
        localStorage.setItem('$dialogFinish', '')
        that.info.GRID_NAME = localStorage.getItem('$GRID_NAME') || that.info.GRID_NAME
        that.showGridArrow = localStorage.getItem('$showGridArrow') === 'true'
        setAllRequest(_apiConfig, { ...queryParam, gridId: localStorage.getItem('$gridId') })
      }
    }
    window.addEventListener('storage', main)
  },

  methods: {
    handleSelectGrid() {
      if (!this.showGridArrow) return
      this.$open('/publicline/detail/selectGrid')
    },
    initDataPostHook(data) {
      this.getInfo(this.queryParam.dayId)
      this.setAllRequest(_apiConfig, this.queryParam)
    },
    async getInfo(dayId) {
      const { username, realname, phone } = Vue.ls.get(USER_INFO)
      const res = await userInfo({ loginId: localStorage.getItem('$username') || username, dayId })
      const { result, success } = res

      if (success) {
        this.info = result[0] || {}
        this.info.LOGIN_NAME = realname
        this.info.GRID_NAME = localStorage.getItem('$GRID_NAME') || this.info.GRID_NAME
      }
    },

    wgcyHook(data) {
      this.userNum.wgcy = data.user_total
    },
    bqygHook(data) {
      this.userNum.bq = data.length
    },
    yytHook(data) {
      this.userNum.yyt = data.count_yyt
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.index-swipe-container {
  // margin-bottom: 3.2vw;
  .bg('top.png');
  // width: 100vw;
  width: 100%;

  ::v-deep .van-icon-play {
    transform: rotate(90deg);
    color: #aaaaaa;
  }
  .title {
    margin-top: 4vw;
  }
  .content {
    background: #ffffff;
    border-radius: 2.1333vw;
    width: 94.6667vw;
    // height: 37.3333vw;
    padding: 5.3333vw 2.6667vw 2.6667vw 2.6667vw;
    margin-top: 2.6667vw;
    box-sizing: border-box;
    .top {
      padding-left: 2.6667vw;
      .right {
        margin-left: 2.6667vw;
      }
      .user {
        margin-bottom: 2.6667vw;
      }
      .img {
        width: 18.6667vw;
        height: 18.6667vw;
      }
      .js {
        background: #32d0b4;
        border-radius: 0.5333vw;
        height: 5.3333vw;
        line-height: 5.3333vw;
        padding: 0 2.6667vw;
        margin-left: 1.3333vw;
      }
    }
    .bottom {
      background: rgba(77, 152, 255, 0.04);
      border-radius: 2.1333vw;
      height: 8vw;
      width: 89.3333vw;
      line-height: 8vw;
      margin-top: 2.6667vw;
      padding: 0 2.6667vw;
      box-sizing: border-box;
      .icon {
        width: 3.7333vw;
        height: 3.7333vw;
        margin-right: 1.6vw;
      }
    }
  }
}
</style>